
.overflow3{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.content-showfn {
	padding-bottom: 0rpx;
	padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(420rpx + env(safe-area-inset-bottom) );
	/* #ifdef MP-WEIXIN */
	/* #endif */
}
.content-box {
	width: 100%;
	height: auto;
	min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
	box-sizing: content-box;
	position: relative;
	padding-top: calc(env(safe-area-inset-top));
	padding-bottom: 120rpx;
	
	/* #ifdef APP-PLUS  */
	margin-bottom: 0rpx;
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
	/* #endif */
	/* #ifdef MP-WEIXIN */
	padding-bottom: 0rpx;
	padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom) );
	/* #endif */

	&-bg {
		width: 100%;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		bottom: 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		/* #endif */
		/* #ifndef MP-WEIXIN */
		top: 0;
		left: 0;
		/* #endif */
	}

	&-loading {
		text-align: center;
		padding: 20rpx 0;
	}

	.message {
		padding: 13rpx 20rpx;
		position: relative;
		z-index: 1;
	}
	
	.message-item {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		flex-wrap: nowrap;
		flex-direction: row;

		.img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			position: relative;
			z-index: 1;
		}

		.content {
			padding: 20rpx;
			max-width: 500rpx;
			border-radius: 24rpx;
			font-size: 32rpx;
		}
		
		// 语音
		.contentType2 {
			display: flex;
			flex-direction: row;
			align-items: center;
			.voice_icon {
				height: 30rpx;
				width: 24rpx; 
				background-repeat: no-repeat;
				background-size: 100%;
			}
			.voice_icon_right {
				background-image: url(../../static/voice-left-3.png);
				margin-left: 10rpx;
			}
			.voice_icon_left {
				background-image: url(../../static/voice-right-3.png);
				margin-right: 10rpx;
			}
			.voice_icon_right_an {
				animation: voiceAn_right .8s linear alternate infinite;
			}
			.voice_icon_left_an {
				animation: voiceAn_left .8s linear alternate infinite;
			}
			@keyframes voiceAn_right {
				0% {
					background-image: url(../../static/voice-left-1.png);
				}
				50% {
					background-image: url(../../static/voice-left-2.png);
				}
				100% {
					background-image: url(../../static/voice-left-3.png);
				}
			}
			@keyframes voiceAn_left {
				0% {
					background-image: url(../../static/voice-right-1.png);
				}
				50% {
					background-image: url(../../static/voice-right-2.png);
				}
				100% {
					background-image: url(../../static/voice-right-3.png);
				}
			}
		}
		
		//图片
		.contentType3{
			padding: 0;
			border-radius: 2rpx;
			background-color: transparent !important;
			.img1{
				width: 300rpx;
				height: auto;
				max-width: 300rpx;
				max-height: 400rpx;
			}
			.img2{
				width: 200rpx;
				height: auto;
				max-width: 300rpx;
				max-height: 400rpx;
			}
			.img{
				width: 200rpx;
				height: auto;
				max-width: 300rpx;
				max-height: 400rpx;
			}
		}
		.contentType3::after{
			border: none !important;
			display: none !important;
		}
		.content-type-right {
			flex-direction: row-reverse;
		}

		&.right {
			flex-direction: row-reverse;

			.content {
				background-color: #FF8F2B;
				margin-right: 28rpx;
				word-break: break-all;
				line-height: 36rpx;
				position: relative;
				color: #FFFFFF;
				font-size: 30rpx;
				// &::after {
				// 	content: '';
				// 	display: block;
				// 	width: 0;
				// 	height: 0;
				// 	border-top: 10rpx solid transparent;
				// 	border-bottom: 10rpx solid transparent;
				// 	border-left: 16rpx solid #FFF;
				// 	position: absolute;
				// 	right: -16rpx;
				// 	top: 30rpx;
				// }
			}
		}

		&.left {
			.content {
				background-color: #FFFFFF;
				margin-left: 28rpx;
				word-break: break-all;
				line-height: 36rpx;
				position: relative;
				color: #323232;
				font-size: 30rpx;
				// &::after {
				// 	content: '';
				// 	display: block;
				// 	width: 0;
				// 	height: 0;
				// 	border-top: 10rpx solid transparent;
				// 	border-bottom: 10rpx solid transparent;
				// 	border-right: 16rpx solid #FFF;
				// 	position: absolute;
				// 	left: -16rpx;
				// 	top: 30rpx;
				// }
			}
		}
	}
}

.input-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: content-box;
	z-index: 999;
	background-color: #fff;
	
	/* #ifdef APP-PLUS */
	margin-bottom: 0rpx;
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
	/* #endif */
	/* #ifdef MP-WEIXIN */
	padding-bottom: 0rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	/* #endif */

	&-flex {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		padding: 20rpx;
		box-sizing: border-box;
		image{
			width: 56rpx;
			height: 56rpx;
		}
		.icon_img {
			margin-right: 35rpx;
		}
		.icon_btn_add{
			margin-left: 35rpx;
		}
		&-grow {
			flex-grow: 1;

			.content {
				box-sizing: border-box;
				background-color: #fff;
				height: 80rpx;
				padding: 0 40rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
				font-size: 26rpx;
				caret-color: $uni-color-success;
			}

			.voice_title {
				text-align: center;
				background-color: #F3F4F6 !important;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 12rpx;
			}
		}

		.btn {
			margin-left: 20rpx;
			background-color: $u-type-success;
			border: none;
		}
	}
	
	.fun-box{
		opacity: 0;
		transition: all 0.1s ease-in-out;
		height: 0;
		.grid-text{
			padding-top: 10rpx;
			color: #333333;
		}
		
	}
	.show-fun-box{
		opacity: 1;
		height: 420rpx;
		background: #F6F6F6;
	}
}

.input-box-mpInputMargin {
	/* #ifdef MP-WEIXIN */
	padding-bottom: 0rpx;
	/* #endif */
}
.voice_an{
	width: 300rpx;
	height: 300rpx;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-55%);
	background-color: rgba(41,41,41,0.7);
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 10rpx;
	.text{
		padding-top: 30rpx;
	}
	@keyframes runVoice{
		0%{
			height: 10%;
		}
		20%{
			height: 50%;
		}
		50%{
			height: 100%;
		}
		80%{
			height: 50%;
		}
		100%{
			height: 0%;
		}
	}	
	.wave{
		width:6rpx;
		height: 100%;
		margin-left: 10rpx;
		border-radius: 50rpx;
		background-color: #999;
		vertical-align: middle;
		display: inline-block;
	}
	.voice_an_icon{
		width: 200rpx;
		height: 100rpx;
		line-height: 50rpx;
		margin: 50rpx 0;
	}
	.voice_an_icon #one{
		animation:runVoice 0.6s infinite 0.1s;
	}
	.voice_an_icon #two{
		animation:runVoice 0.6s infinite 0.3s;
	}
	.voice_an_icon #three{
		animation:runVoice 0.6s infinite 0.6s;
	}
	.voice_an_icon #four{
		animation:runVoice 0.6s infinite 0.1s;
	}
	.voice_an_icon #five{
		animation:runVoice 0.6s infinite 0.3s;
	}
	.voice_an_icon #six{
		animation:runVoice 0.6s infinite 0.6s;
	}
	.voice_an_icon #seven{
		animation:runVoice 0.6s infinite 0.1s;
	}
}